<template>
  <div>
    <a-row :gutter="24">
      <a-col :span="24">
        <a-card
          class="project-list"
          :loading="platformLoading"
          style="margin-bottom: 24px"
          :bordered="false"
          title="任务统计"
          :body-style="{ padding: 0 }"
        >
          <div class="extra-wrapper" slot="extra">
            <a-range-picker
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              @change="getSelfAnalysis"
              v-model="rangeTime"
            />
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card title="任务数" :loading="platformLoading">
          <div style="height: 200px">
            <AWM-rate name="镜头数" :rateShot="rateShot"></AWM-rate>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :md="8" :xl="12" :style="{ marginBottom: '24px' }">
        <a-card :loading="platformLoading">
          <div class="lens-statistical">
            <div class="lens-statistocal-title">
              <h4>
                <span> {{ userData.detailName }} 镜头制作量 </span>
                
              </h4>
            </div>
            <div class="lens-statistocal-body">
              <div class="lens-statistocal-time">
                <h6>{{ taskSum.totalTimeLength | NumberFormat}}</h6>
              </div>
              <div class="lens-statistocal-num">
                <h6>{{ taskSum.finishTimeLength | NumberFormat}}
                  <!-- <span>
                    <a-icon
                      type="caret-up"
                      v-if="weekShot.allNum - weekShot.lastWeekNum > 0"
                      two-tone-color="#f81d22"
                    />
                    <a-icon
                      type="caret-down"
                      v-else-if="weekShot.allNum - weekShot.lastWeekNum < 0"
                      two-tone-color="#52c41a"
                    />
                  </span> -->
                  </h6>
              </div>
            </div>
            <div class="lens-statistocal-footer">
              <div class="lens-statistocal-item">
                <div class="lens-statistocal-icon">
                  <a-icon type="check-circle" />
                </div>
                <div class="lens-statistocal-content">
                  <div class="content-num">{{ taskSum.nowDelayTimeLength | NumberFormat}}</div>
                  <div>逾期时长(秒)</div>
                </div>
              </div>
              <div class="lens-statistocal-item">
                <div class="lens-statistocal-icon">
                  <a-icon type="reload" />
                </div>
                <div class="lens-statistocal-content">
                  <div class="content-num">{{ taskSum.retakeTimeLength | NumberFormat}}</div>
                  <div>修改时长(秒)</div>
                </div>
              </div>
              <div class="lens-statistocal-item">
                <div class="lens-statistocal-icon">
                  <a-icon type="area-chart" />
                </div>
                <div class="lens-statistocal-content">
                  <div class="content-num">返修次数 {{ taskSum.retakeNumByShot | NumberFormat }}</div>
                  <div>逾期任务数 {{ taskSum.nowDelayNumByShot | NumberFormat }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card title="各等级镜头数" :loading="platformLoading">
          <div style="height: 200px">
            <AWM-bar :chartData="levelShotList" name="镜头数"></AWM-bar>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card title="任务状态占比" :loading="platformLoading">
          <div style="height: 220px">
            <AWM-pai :chartData="newRateData" :radius="[30, 60]" :height="175"></AWM-pai>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :md="8" :xl="12" :style="{ marginBottom: '24px' }">
        <a-card :loading="platformLoading">
          <div style="height: 275px;overflow:auto;">
            <AWM-overdue :visible="task.visible" :type="task.type" :rdata="task.requireData"  :rangeTime="rangeTime"></AWM-overdue>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="12" :md="8" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card title="各等级返修次数" :loading="platformLoading">
          <div style="height: 220px">
            <AWM-bar :chartData="taskBarData"></AWM-bar>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import moment from 'moment'
import { ChartCard, MiniArea, Bar, MiniSmoothArea } from '@/components'
import { baseMixin } from '@/store/app-mixin'
import { taskByWeekStatistics, taskBySumStatistics, overdueTaskListStatistics } from '@/api/system'
import { monthTaskGetMonthTask, monthTaskGetMonthTaskBySelf, userApplyUp } from '@/api/login'
import AWMPai from '@/components/AWMechart/pai'
import AWMLine from '@/components/AWMechart/line'
import AWMBar from '@/components/AWMechart/bar'
import AWMRate from '@/components/AWMechart/rate'
import { mapGetters } from 'vuex'
import LevelStar from './modules/LevelStar'
import levelStartModal from './modules/levelStartModal'
import { STable, Ellipsis } from '@/components'
import AWMOverdue  from '@/views/components/overdue'


const columns = [
  {
    title: '项目',
    dataIndex: 'projectName',
  },
  {
    title: '工作室',
    dataIndex: 'studioName',
  },
  {
    title: '类型',
    width: 80,
    dataIndex: 'module',
    customRender: (text) => text == 'asset' ? '资产' : '镜头',
  },
  {
    title: '信息名称',
    dataIndex: 'cn_name',
    customRender: (text,scope) => scope.infoJson ? scope.infoJson.entity : '--',
  },
  {
    title: '任务',
    dataIndex: 'action',
    customRender: (text,scope) => scope.taskJson ? scope.taskJson.entity : '--',
  },
  {
    title: '制作者',
    width: 100,
    dataIndex: 'userNames',
    scopedSlots: { customRender: 'userNames' },
    // customRender: (text,scope) => scope.taskJson ? scope.taskJson.userNames : '--',
  },
   {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
]
export default {
  name: 'user-all-analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    MiniArea,
    Bar,
    MiniSmoothArea,
    AWMPai,
    AWMLine,
    AWMBar,
    AWMRate,
    LevelStar,
    levelStartModal,
    STable,
    Ellipsis,
    AWMOverdue
  },
  data() {
    return {
      columns,
      rangeTime: null,
      time:null,
      dKey: null,
      dId: null,
      userData: {
        detailName: '',
      },
      levelRateList: [],
      rateShot: {
        total: 0,
        finish: 0,
      },
      weekShot: {
        allNum: 0, //  已完成
        subTime: 0, //  时长完成任务对比
        allTime: 0, //  总时长
        editTime: 0, // 返修时长

        lastWeekTime: 0, // 上周时长
        lastWeekNum: 0, // 上周任务数
      },
      taskNumList: {},
      levelShotList: [],
      newRateData: [],
      myChart: null,
      platformLoading: false,
      timeValue: null,
      taskLineData: [],
      taskLineParameter: [
        { key: 'time', name: '完成时长' },
        { key: 'allTime', name: '总时长' },
      ],
      taskBarData: [],
      barList: [
        { key: 'count', name: '新做' },
        { key: 'newCount', name: '修改' },
      ],
      plineData: [],
      plineList: [
        { key: 'levelA', name: 'A' },
        { key: 'levelB', name: 'B' },
        { key: 'levelC', name: 'C' },
        { key: 'levelD', name: 'D' },
      ],
      task: {
        visible: false,
        confirmLoading: false,
        requireData: {id: this.dId},
        type: '3',
      },
      personBar: [],
      starList: [],
      loading: false,
      userLevels: [],
      levelList:[],
      taskSum:{}
    }
  },
  filters: {},
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
    }),
  },
  created() {
    let { key, id } = this.$route.params
    this.dKey = key || 'user'
    this.dId = id || this.userInfo.id
    this.getSelfAnalysis()
    
  },
  mounted() {
    this.task.requireData.id = this.dId
    this.task.visible = true
  },
  methods: {
    handleUp() {
      this.loading = true
      userApplyUp()
        .then((res) => {
          this.$message.success('申请成功!')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getSelfAnalysis() {
      let { dKey, dId } = this
      let typeJSON = {
        user: 3,
        studios: 2,
        project: 1,
      }
      let data = { detailId: dId, type: typeJSON[dKey] }
      if(this.rangeTime && this.rangeTime.length){
        data.startTime = this.rangeTime[0]
        data.endTime = this.rangeTime[1]
      }
      taskBySumStatistics(data).then((res) => {
        let data = res.data.task
        this.taskSum = data
        this.userData.detailName = res.data.name
        let taskBarData = []
        let levelShotList = []
        this.rateShot = {
          total: data.totalNumByShot || 0,
          finish: data.finishNumByShot || 0,
        }
        for(let i in data.levelNumByShot){
          levelShotList.push({ name: i, count: data.levelNumByShot[i] })
        }
        for(let i in data.retakeNumLevelByShot){
          taskBarData.push({ name: i, count: data.retakeNumLevelByShot[i] })
        }
        let newRateData = [
          {
            name: '已完成',
            value: data.finishNumByShot || 0,
          },
          {
            name: '逾期',
            value: data.nowDelayNumByShot || 0,
          },
          {
            name: '返修',
            value: data.retakeNumByShot || 0,
          }
        ]
        this.newRateData = newRateData
        this.taskBarData = taskBarData
        this.levelShotList = levelShotList
      })
    },
  },
}
</script>

<style lang="less" scoped>
.all-star-wrap {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
  .level-wrap {
    width: 10%;
    text-align: center;
    margin-top: 21px;
    li {
      font-weight: bold;
      border: 1px solid #ccc;
      line-height: 42px;
      &:nth-child(2) {
        border-top: none;
      }
    }
  }
  .star-wrap-wrap {
    width: 30%;
    text-align: center;
    span {
      font-weight: bold;
    }
    .red {
      color: #ee6666;
    }
    .green {
      color: #91cc75;
    }
  }
}

// /deep/
// .ant-card{
//   background-color: #202948;
//   .ant-card-head{
//     border-bottom-color:transparent;
//   }
// }
.star-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  &:nth-child(3) {
    border-top: none;
  }
  li {
    width: 50%;
  }
  // &.star-wrap-next {
  //   padding-top: 10px;
  // }
}
.progress-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .progress-box {
    position: relative;
    span {
      position: absolute;
      display: inline-block;
      top: 85%;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
}
.user-level-details {
  line-height: 30px;
}
.lens-statistical {
  .lens-statistocal-title {
    position: relative;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    // height: 100px;
    h4 {
      position: relative;
      display: inline-block;
      padding: 5px 20px;
      background-color: #fff;
      text-align: center;
      margin-bottom: 0;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%,-50%);
      font-size: 20px;
      z-index: 1;
      span {
        font-weight: bold;
        color: #fae898;
      }
    }
    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background-color: #fae898;
      z-index: 0;
    }
  }
  .lens-statistocal-body {
    display: flex;
    justify-content: center;
    align-content: center;
    & > div {
      padding: 30px;
      h6 {
        margin: 0;
        line-height: 75px;
        color: inherit;
      }
    }
    .lens-statistocal-time {
      color: #fae898;
      font-size: 120px;
    }
    .lens-statistocal-num {
      color: #9ba8d5;
      font-size: 100px;
      span {
        font-size: 25px;
        font-weight: bold;
      }
    }
  }
  .lens-statistocal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    height: 50px;
    .lens-statistocal-item {
      display: flex;
      align-content: center;
      padding: 0 10px;
      &:nth-child(2) {
        .lens-statistocal-icon {
          color: #be63a8;
        }
      }
      &:nth-child(3) {
        .lens-statistocal-icon {
          color: #be7262;
        }
        .lens-statistocal-content {
          text-align: left;
        }
      }
      .lens-statistocal-icon {
        padding: 6px;
        line-height: 40px;
        font-size: 30px;
        color: #63c0cf;
      }
      .lens-statistocal-content {
        font-size: 14px;
        text-align: center;
        margin-left: 5px;
        min-width: 100px;
        color: #9ba8d5;
        font-weight: bold;
        // .content-num {
        //   font-size: 18px;
        // }
      }
    }
  }
}
</style>
